<script setup lang="ts">
import { computed } from "vue";
import NullFile from "@/assets/file.svg";

interface Props {
  src: string | undefined;
  className?: string;
}
const props = defineProps<Props>();
const isImg = computed(() => props.src?.includes("http"));
const isIcon = computed(() => props.src?.includes("icon_"));
</script>
<template>
  <van-image
    v-if="isImg"
    fit="contain"
    :class="`app-icon ${className}`"
    :src="src"
  />
  <svg
    v-else-if="isIcon"
    :class="`icon app-icon ${className}`"
    aria-hidden="true"
  >
    <use :xlink:href="`#icon-${src}`" />
  </svg>
  <svg v-else :class="`icon app-icon ${className}`" aria-hidden="true">
    <use :xlink:href="`#icon-${src}`" />
  </svg>
  <van-image
    v-else
    fit="contain"
    :class="`app-icon ${className}`"
    :src="NullFile"
  />
</template>

<style scoped lang="scss">
.app-icon {
  object-fit: cover;
  font-size: 36px;
  width: 36px;
  height: 36px;
}
</style>
